<script setup lang="ts">
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import usaJson from '@/assets/geo.json'

onMounted(() => {
  const chartDom = document.getElementById('map');
  const myChart = echarts.init(chartDom, 'dark');
  let option;

  const regions = [
    { // 隐藏南海诸岛,因为顶层已经添加过了
      name: '南海诸岛',
      itemStyle: {
        normal: {
          opacity: 0 // 为 0 时不绘制该图形
        }
      },
      label: {
        show: false
      }
    }
  ]
  const data = [
    { name: '海南省', value: 4822020 },
    { name: '内蒙古自治区', value: 731449 },
    { name: 'Arizona', value: 6553255 },
    { name: 'Arkansas', value: 2949131 },
  ]
  echarts.registerMap('USA', usaJson);
  option = {
    backgroundColor: 'transparent',
    title: {
      // text: 'USA Population Estimates (2012)',
      // subtext: 'Data from www.census.gov',
      // sublink: 'http://www.census.gov/popest/data/datasets.html',
      // left: 'right'
    },
    tooltip: {
      trigger: 'item',
      showDelay: 0,
      transitionDuration: 0.2
    },
    // visualMap: {
    //   left: 'right',
    //   min: 500000,
    //   max: 38000000,
    //   inRange: {
    //     color: [
    //       '#313695',
    //       '#4575b4',
    //       '#74add1',
    //       '#abd9e9',
    //       '#e0f3f8',
    //       '#ffffbf',
    //       '#fee090',
    //       '#fdae61',
    //       '#f46d43',
    //       '#d73027',
    //       '#a50026'
    //     ]
    //   },
    //   text: ['多', '少'],
    //   calculable: true
    // },
    toolbox: {
      show: false,
      //orient: 'vertical',
      left: 'left',
      top: 'top',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    geo1: [
      {
        map: 'USA',
        aspectScale: 0.85,
        zoom: 1,
        top: '10%',//***********重点**********距离顶部的位置，每层向下一个百分比
        left: '15%',
        roam: false,
        z: 10,//*********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
        regions: regions,
        itemStyle: {
          areaColor: '#003b95',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
          borderColor: '#ddd',
          borderWidth: 1,
          shadowColor: '#fff',
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,
        },
        emphasis: {
        },
        select: {
        },
        tooltip: {
          show: false
        },
      },
      {
        map: 'USA',
        aspectScale: 0.85,
        zoom: 1,
        top: '10.5%',//根据自己需要来设置
        left: '15%',
        roam: false,
        z: -1,//变小，也就是被压在下面
        itemStyle: {
          areaColor: '#003b75',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
          borderColor: '#666',
          borderWidth: 4,
          shadowColor: '#0f4c74',
          shadowOffsetX: 0,
          shadowOffsetY: 8,
          shadowBlur: 10,
        },
        regions: regions,
      },
      {
        map: 'USA',
        aspectScale: 0.85,
        zoom: 1,
        top: '12%',//根据自己需要来设置
        left: '15%',
        roam: false,
        z: -2,//变小，也就是被压在下面
        itemStyle: {
          areaColor: '#eee',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
          borderColor: '#333',
          borderWidth: 4,
          shadowColor: '#0f4c74',
          shadowOffsetX: 0,
          shadowOffsetY: 8,
          shadowBlur: 10,
        },
        regions: regions,
      }
    ],
    series: [
      {
        name: 'USA PopEstimates',
        type: 'map',
        roam: false,
        map: 'USA',
        animationDurationUpdate: 1000,
        universalTransition: true,
        emphasis: {
          label: {
            show: true
          }
        },
        z: 100,
        zoom: 1,
        top: '10%',
        left: '15%',
        aspectScale: 0.85,
        regions: regions,
        itemStyle: {
          areaColor: '#008b85',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
          borderColor: '#000',
          borderWidth: 2,
          shadowColor: '#0f4c74',
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,
          normal: {
            areaColor: '#004ba5',
            borderColor: '#fff',
            border: '20px'
          },
          emphasis: {
            // areaColor: '#eee'
          }
        },
        data: data
      }
    ]
  };
  // myChart.setOption(option);

  const barOption = {
    background: 'transparent',
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        rotate: 30
      },
      data: data.map(function (item) {
        return item.name;
      })
    },
    animationDurationUpdate: 1000,
    series: {
      type: 'bar',
      id: 'population',
      data: data.map(function (item) {
        return item.value;
      }),
      universalTransition: true
    }
  };
  let currentOption = option;
  myChart.setOption(currentOption);
  setInterval(function () {
    currentOption = currentOption === option ? barOption : option;
    myChart.setOption(currentOption, true);
  }, 2000);

})

</script>

<template>
  <div id="map" style="width: 800px;height: 600px;"></div>
</template>
